import { Row, Col, Typography } from 'antd'
import Link from 'next/link'
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
  LikeOutlined,
  IeOutlined,
} from '@ant-design/icons'

import Logo from '@/components/logo/index'

import '@/styles/common.css'
import '@/styles/app-footer.css'

const { Text } = Typography

/**
 * 这里是怎么加载 Facebook 之类的连接和图标的，我是真的不会。
 */
const FooterLinks = () => (
  <>
    <div
      style={{
        width: 176,
        height: 'auto',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Logo />
      <div>
        Dribbble is the world’s leading community for creatives to share, grow,
        and get hired.
      </div>
      <Row gutter={[16, 16]}>
        <Col>
          <Link href="">
            <a className="link-my-style">
              <MailOutlined />
            </a>
          </Link>
        </Col>
        <Col>
          <Link href="">
            <a className="link-my-style">
              <AppstoreOutlined />
            </a>
          </Link>
        </Col>
        <Col>
          <Link href="">
            <a className="link-my-style">
              <SettingOutlined />
            </a>
          </Link>
        </Col>
        <Col>
          <Link href="">
            <a className="link-my-style">
              <LikeOutlined />
            </a>
          </Link>
        </Col>
        <Col>
          <Link href="">
            <a className="link-my-style">
              <IeOutlined />
            </a>
          </Link>
        </Col>
      </Row>
    </div>
  </>
)

export default FooterLinks
